import React,{Component} from 'react';
import { Container, Row, Col } from 'reactstrap';
import { Media,Button } from 'reactstrap';
import styles from './index.scss';
import CSSModules from 'react-css-modules';
import {connect} from 'react-redux';
import {fetchList} from '../../actions/dianyingthree.js';

const mapStateToProps=state=>{

    return{
        lists      : state.dianyingthree.lists,
        onOff      : state.dianyingthree.onOff,
        contentText: state.dianyingthree.contentText
    }
}
class DianYingThree extends Component{
    // showContent=(e)=>{
    //     e.preventDefault();
    //    console.log(this.props);
    //    const{onOff,contentText,lists}=this.props;
    //    console.log(onOff,contentText,lists[0]);
    //    var str=(lists[0]).substr(0,10)+"...";
    //    if(!onOff){
    //         this.setState({
    //             onOff:!onOff,
    //             contentText:str
    //         });
    //     }else{
    //         this.setState({
    //             onOff:!onOff,
    //             contentText:lists[0]
    //         });
    //     }

    // }
    componentDidMount(){
        this.props.fetchList().then(()=>{
            //简介的展开收缩
        var btn     = document.getElementById('btn');
        var content = document.getElementById('content');
        var str     = (this.props.lists)[0].content;

        //定义一个变量，表示当前的状态（收缩、展开）
        var onOff       = false;       // true表示展开
            btn.onclick = function(){
            if(onOff) {
                content.innerHTML = str.substr(0,10)+"......";
                btn.innerHTML     = '展开'
            } else {
                //说明当前状态是收缩的，需要展开
                content.innerHTML = str
                btn.innerHTML     = '收缩';
            }
            onOff = !onOff;  //每点击一次，改变一次展开、收缩状态
            return false;  //阻止a标签的默认事件
        }
        })
    };
    hideContent(){
        var text=(this.props.lists)[0].content;
        if(text){
            var text=text.substr(0,10)+"......";
        }
       return text
    }
 render(){
    var list = (this.props.lists)[0]
    //  const {lists}=this.props;
   return(
            <Container styleName="dianying">
            {/*电影详情*/}
                <Row styleName="row-bg">
                    <Col xs="12">
                    <Media>
                    <Media left href="#">
                        <img src={list.cimage} style={{width:146,height:200,margin:30}}/>
                    </Media>
                    <Media body>
                      <Media heading style={{marginTop:30}}>
                        <span>{list.cname}</span>
                        <button styleName="collect">
                        <img src="../../images/heart.png"/>
                        <span>收藏</span>
                        </button>
                      </Media>
                     <Media styleName="leixing">
                        <Col xs="3">
                        <span>类型：</span>
                        <span styleName="biaoqian">
                            <span>剧情</span>
                        </span>
                        <span styleName="biaoqian">
                            <span>爱情</span>
                        </span>
                        </Col>
                        <Col xs="3">
                        <span>年代：
                            <span>{list.cdate}</span>
                        </span>
                        </Col>
                        <Col xs="3">
                        <span>地区：
                            <span>{list.cnation}</span>
                        </span>
                        </Col>
                     </Media>
                     <Media styleName="daoyan">
                        <Col xs="3">
                        <span>导演：
                            <span styleName="name">落落</span>
                        </span>
                        </Col>
                        <Col xs="9">
                        <span>演员：
                            <span styleName="name">赵英博/任敏/辛云来</span>
                        </span>
                        </Col>
                     </Media>
                     <Media styleName="jianjie">
                        <Col>
                        <span>简介：</span>
                        <span id="content">{this.hideContent()}
                        </span>
                        <a href="#" id="btn" onClick={this.showContent}>展开</a>
                        </Col>
                     </Media>
                     <Media styleName="btnMedia">
                        <Col>
                            <a styleName="playNow" href={list.cplay}>
                            <img src="../../images/play.png"/>
                            <span>立即播放</span>
                            </a>
                            <button styleName="phoneLook">
                            <img src="../../images/sj.png"/>
                            <span>手机观看</span>
                            </button>
                        </Col>
                     </Media>
                    </Media>
                  </Media>
                    </Col>
                </Row>
                {/*精彩推荐*/}
                <Row xs="12">
                    <p styleName="title">精彩推荐</p>
                </Row>
                {/*list1*/}
                <Row styleName="tuijian" xs="12">
                    <Media left href="#">
                        <img styleName='tj-img' src="../../images/dy3-list1.jpg"/>
                    </Media>
                    <Media body>
                    <Media heading>
                        <p styleName="tj-head">悲伤逆流成河看哭了</p>
                    </Media>
                        <Row styleName="tj-btm">
                            <Col xs="6">
                            <i>
                                <img styleName="touxiang" src="../../images/touxiang.jpg"/>
                            </i>
                            <span>陪你聊娱乐</span>
                            </Col>
                            <Col xs="6">
                            <span>
                                <span>993</span>
                                <span>人观看</span>
                            </span>
                            </Col>
                        </Row>
                </Media>
                </Row>
                {/*list2*/}
                <Row styleName="tuijian" xs="12">
                    <Media left href="#">
                        <img styleName='tj-img' src="../../images/dy3-list1.jpg"/>
                    </Media>
                    <Media body>
                    <Media heading>
                        <p styleName="tj-head">悲伤逆流成河看哭了</p>
                    </Media>
                        <Row styleName="tj-btm">
                            <Col xs="6">
                            <i>
                                <img styleName="touxiang" src="../../images/touxiang.jpg"/>
                            </i>
                            <span>陪你聊娱乐</span>
                            </Col>
                            <Col xs="6">
                            <span>
                                <span>993</span>
                                <span>人观看</span>
                            </span>
                            </Col>
                        </Row>
                </Media>
                </Row>
                {/*list3*/}
                <Row styleName="tuijian" xs="12">
                    <Media left href="#">
                        <img styleName='tj-img' src="../../images/dy3-list1.jpg"/>
                    </Media>
                    <Media body>
                    <Media heading>
                        <p styleName="tj-head">悲伤逆流成河看哭了</p>
                    </Media>
                        <Row styleName="tj-btm">
                            <Col xs="6">
                            <i>
                                <img styleName="touxiang" src="../../images/touxiang.jpg"/>
                            </i>
                            <span>陪你聊娱乐</span>
                            </Col>
                            <Col xs="6">
                            <span>
                                <span>993</span>
                                <span>人观看</span>
                            </span>
                            </Col>
                        </Row>
                </Media>
                </Row>
        {/*更多精彩*/}
        <Row styleName="dy-more" xs="12">
            <Col sm={{ size: '3', offset: 7 }}>
                <p>更多精彩
                <img src="../../images/more.png"/></p>
            </Col>
        </Row>
            </Container>
        )
    }
}
var DianYingCSS = CSSModules(DianYingThree, styles, { allowMultiple: true });
export default connect(mapStateToProps,{fetchList})(DianYingCSS);